<template>
    <view class="main">
        <uni-nav-bar title="执行单详情" backgroundColor="#63a4f0" color="#222C33" statusBar="true" @clickLeft="back()"
            left-icon="arrowleft">
        </uni-nav-bar>
        <view class="infoContent">
            <view class="bg"></view>
            <view class="content">
                <view class="info">
                    <view class="label">工单号：</view>
                    <view class="text">{{ orderInfoData.reportNo }}</view>
                </view>
                <view class="info">
                    <view class="label">工单类型：</view>
                    <view class="text">{{ reportType ? '报工单' : '送货单' }}</view>
                </view>
                <view class="info">
                    <view class="label">项目订单号：</view>
                    <view class="text">{{ orderInfoData.projectNo }}</view>
                </view>
                <view class="info">
                    <view class="label">所属执行单号：</view>
                    <view class="text">{{ orderInfoData.executeNo }}</view>
                </view>
                <view v-if="reportType == 0">
                    <view class="info">
                        <view class="label">送货时间：</view>
                        <view class="text">{{ orderInfoData.deliverTime }}</view>
                    </view>
                    <view class="info">
                        <view class="label">送货地点：</view>
                        <view class="text">{{ orderInfoData.address }}</view>
                    </view>
                    <view class="info productList">
                        <view class="label">货物详情：</view>
                        <view class="text ">
                            <view class=" productInfo" v-for="info, index in orderInfoData.productList" :key="index">
                                <view class="product ellipsis">货名：{{ info.productName }}</view>
                                <view class="product ellipsis">数量：{{ info.num }}</view>
                                <view class="product ellipsis">单价：{{ info.price }}元</view>
                                <view class="product ellipsis">合计：{{ info.amount }}元</view>
                            </view>
                        </view>
                    </view>
                    <view class="info">
                        <view class="label">总金额：</view>
                        <view class="text">{{ orderInfoData.reportAmount }}</view>
                    </view>
                    <view class="info">
                        <view class="label">送货人：</view>
                        <view class="text">{{ orderInfoData.deliverPerson }}</view>
                    </view>
                    <view class="info">
                        <view class="label">备注：</view>
                        <view class="text">{{ orderInfoData.remark }}</view>
                    </view>
                </view>
                <view v-if="reportType == 1">
                    <view class="info">
                        <view class="label">服务时间：</view>
                        <view class="text">{{ `${orderInfoData.beginTime} 至 ${orderInfoData.endTime}` }}</view>
                    </view>
                    <view class="info">
                        <view class="label">服务地点：</view>
                        <view class="text">{{ orderInfoData.address }}</view>
                    </view>
                    <view class="info">
                        <view class="label">实际服务面积：</view>
                        <view class="text">{{ orderInfoData.num }}{{ orderInfoData.unit || "" }}</view>
                    </view>
                    <view class="info">
                        <view class="label">服务人员：</view>
                        <view class="text">{{ orderInfoData.workerList ? orderInfoData.workerList.toString()
            : '' }}</view>
                    </view>
                    <view class="info">
                        <view class="label">农机设备：</view>
                        <view class="text">{{ orderInfoData.deviceList ? orderInfoData.deviceList.toString()
            : '' }}</view>
                    </view>
                    <view class="info">
                        <view class="label">农资使用详情：</view>
                        <view class="text">{{ orderInfoData.agriculturalProductionUsage }}</view>
                    </view>
                    <view class="info">
                        <view class="label">备注：</view>
                        <view class="text">{{ orderInfoData.remark }}</view>
                    </view>
                </view>
                <view class="info">
                    <view class="label">业务运营方：</view>
                    <view class="text">{{ orderInfoData.providerName }}</view>
                </view>
                <view class="info">
                    <view class="label">服务提供方：</view>
                    <view class="text">{{ orderInfoData.organizationName }}</view>
                </view>
                <view class="info">
                    <view class="label">终端用户方：</view>
                    <view class="text">{{ orderInfoData.memberName }}</view>
                </view>
                <view class="info">
                    <view class="label">创建人：</view>
                    <view class="text">{{ orderInfoData.createUserName }}</view>
                </view>
                <view class="info swiperList">
                    <view class="label">凭证图片：</view>
                    <view class="text">
                        <uni-swiper-dot v-show="imgUrlList.length" :info="imgUrlList" :current="current" field="url"
                            mode="default">
                            <swiper class="swiper-box" @change="change">
                                <swiper-item v-for="(url, index) in imgUrlList" :key="index">
                                    <image :src="url" class="image-item" mode="aspectFill" @error="handleError(index)"
                                        @click="previewImage(index)" />
                                </swiper-item>
                            </swiper>
                        </uni-swiper-dot>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import workOrderApi from '@/api/socialized-servce/person-message/work-order.js'
import OrderItem from "./components/order-item.vue"
export default {
    components: {
        OrderItem
    },
    data() {
        return {
            current: 0,
            orderInfoData: {},
            imgUrlList: [],
            reportType: -1
        }
    },
    onLoad(v) {
        let reportNo = v ? v.reportNo : '';
        this.reportType = v ? v.reportType : '';
        this.queryOrderInfo(reportNo, Number(this.reportType));
    },
    methods: {
        change(e) {
            this.current = e.detail.current;
        },
        handleError(index) {
            this.$set(this.imgUrlList, index, require('@/static/errImg.png'))
        },
        previewImage(index) {
            console.log(index, this.imgUrlList)
            // 调用预览图片API
            uni.previewImage({
                current: index, // 当前显示图片索引
                urls: this.imgUrlList, // 需要预览的图片URL列表
            });
        },
        queryOrderInfo(no, reportType) {
            if (no) {
                let api = null
                console.log(reportType)
                if (reportType) {
                    api = workOrderApi.queryByNoReportWork
                } else {
                    api = workOrderApi.queryByNoReportDeliver
                }
                api(no).then(res => {
                    this.orderInfoData = res.data || {};
                    let srcList = this.orderInfoData.reportUrl ? this.orderInfoData.reportUrl.split(',') : [];
                    this.imgUrlList = srcList

                })
            } else {
                uni.showToast({
                    title: '为获取到详情',
                    icon: 'none'
                });
            }
        },
        //返回上一步
        back() {
            uni.navigateBack({
                delta: 1,
            });
        },
    }

}
</script>

<style lang="scss" scoped>
.ellipsis {
    display: block;
    white-space: nowrap; //不换行
    overflow: hidden; //超出部分隐藏
    text-overflow: ellipsis; //文本溢出显示省略号
}

.infoContent {
    height: calc(100vh - 10vw - 44px);
    padding: 5vw;
    position: relative;
    box-sizing: border-box;

    .bg {
        top: -1px;
        left: 0;
        position: absolute;
        width: 100vw;
        height: 30vh;
        background: rgb(99, 164, 240);
    }

    .content {
        top: 5vw;
        left: 50%;
        position: absolute;
        width: calc(100vw - 10vw);
        height: 100%;
        padding: 3vw;
        box-sizing: border-box;
        transform: translateX(-50%);
        background-color: #ffffff;
        box-shadow: 0 0 10px 10px #00000008;
        border-radius: 3vw;
        overflow-y: auto;

        .info {
            width: 100%;
            font-size: 30rpx;
            line-height: 90rpx;
            display: flex;
            border-bottom: 1rpx solid #eeeeee;
            word-wrap: break-word;

            .label {
                width: 30vw;
                text-align: left;
            }

            .text {
                width: calc(100% - 30vw);
            }

            .swiper-item {
                background-color: #00000008;
                height: 100%;
            }

            .image-item {
                width: 100% !important;
                height: 100% !important;
                background-color: #00000008;
                border: 1px solid #cecece !important;
                box-sizing: border-box !important;
            }
        }

        .productList {
            width: 100%;
            padding-bottom: 4vw;
            display: block;

            .text {
                width: 100%;

                .productInfo {
                    background-color: #EDEEF5;
                    margin-bottom: 3vw;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    flex-wrap: wrap;
                    border-radius: 2vw;
                    padding: 1vw;

                    .product {
                        width: calc(50% - 2vw);
                        margin: 1vw;
                        background-color: #ffffff;
                        border-radius: 2vw;
                        padding-left: 2vw;
                        box-sizing: border-box;
                    }

                    &:last-child {
                        margin: 0;
                    }
                }
            }
        }

        .swiperList {
            padding: 4vw 0;
        }
    }
}
</style>